<template>
  <div class="dialog">
    <el-dialog
      :title="'维修记录'+titleText"
      :visible.sync="showDialog"
      width="55%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="故障类型选择：" class="w50p" prop="hitchTypeCode">
          <el-select
            v-model="formData.hitchTypeCode"
            clearable
            filterable
            placeholder="故障类型选择"
            :disabled="true"
          >
            <el-option
              v-for="item of hitchTypeArr"
              :key="item.hitchTypeCode"
              :label="item.hitchTypeName"
              :value="item.hitchTypeCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称：" class="w50p" prop="equipmentCode">
          <el-select
            v-model="formData.equipmentName"
            clearable
            filterable
            placeholder="选择设备"
            :disabled="true"
          >
            <el-option
              v-for="item in equipmentArr"
              :key="item.equipmentCode"
              :label="item.equipmentName"
              :value="item.equipmentCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择关键字：" class="w50p" prop="hitchDescription">
          <el-select
            v-model="formData.hitchDescription"
            clearable
            filterable
            multiple
            :disabled="true"
            placeholder="选择关键字"
          >
            <el-option
              v-for="item in keysArr"
              :key="item.keywordCode"
              :label="item.hitchKeywordName"
              :value="item.hitchKeywordName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="故障源：" class="w50p" prop="discoverNodes">
          <el-select
            v-model="formData.discoverNodes"
            clearable
            filterable
            placeholder="故障源选择"
            :disabled="true"
          >
            <el-option
              v-for="item of discoverNodesArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="故障照片、视频：" class="w50p">
          <el-upload
            ref="upload"
            class="upload-file"
            action=""
            multiple
            :on-remove="
              params =>
                handleRemove(
                  params
                )
            "
            :http-request="
              params =>
                handleFile(
                  params
                )
            "
            :file-list="uploadFileList"
            accept=".png,.jpg,.jpeg,.pdf,.mp4"
            :disabled="true"
          >
            <el-button
              type="text"
              class="add-many"
            ><i class="el-icon-plus"></i></el-button>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="上报人：" class="w50p" prop="proposer">
          <el-select
            v-model="formData.proposer"
            clearable
            filterable
            placeholder="上报人选择"
            :disabled="true"
          >
            <el-option
              v-for="item of userList"
              :key="item.userId"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期 ：" class="w50p" prop="applyDate">
          <el-date-picker
            v-model="formData.applyDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="维修方式 ：" class="w50p" prop="repairNature">
          <el-select
            v-model="formData.repairNature"
            clearable
            filterable
            placeholder="维修方式选择"
            :disabled="true"
          >
            <el-option
              v-for="item of repairNatureArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备件消耗：" class="w50p">
          <div class="hang-content">
            <div
              v-for="(key,index) in repairConsumeBOList"
              :key="index+'deviceCode'"
              class="hang-content-one"
            >
              <el-select
                v-model="key.deviceCode"
                clearable
                filterable
                placeholder="备件选择"
                :disabled="true"
              >
                <el-option
                  v-for="(item,indexK) of sparePartArr"
                  :key="item.sparePartsCode+'spare'+indexK"
                  :label="item.sparePartsName"
                  :value="item.sparePartsCode"
                />
              </el-select>
              <el-input
                v-model="key.num"
                clearable
                placeholder="请填写数量"
                :disabled="true"
              />
              <el-input
                v-model="key.cost"
                clearable
                placeholder="请填写费用"
                :disabled="true"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="editObject.repairNature === '委外维修'" label="维修金额：" class="w50p" prop="result">
          <el-input
            v-model="formData.amount"
            clearable
            placeholder="请输入维修金额"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="维修日期 ：" class="w50p" prop="repairDate">
          <el-date-picker
            v-model="formData.repairDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="维修人：" class="w50p" prop="handUsername">
          <el-select
            v-model="formData.handUsername"
            clearable
            filterable
            placeholder="维修人选择"
            :disabled="true"
          >
            <el-option
              v-for="item of userList"
              :key="item.userId"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="维修结果：" class="w50p" prop="result">
          <el-input
            v-model="formData.taskStatus"
            clearable
            placeholder="请输入维修结果"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item class="w50p" prop="processMode" label="处理过程：">
          <el-input
            v-model="formData.processMode"
            clearable
            :rows="2"
            type="textarea"
            placeholder="请输入处理过程"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="故障描述：" class="w50p" prop="remark">
          <el-input
            v-model="formData.remark"
            clearable
            :rows="2"
            type="textarea"
            placeholder="请输入故障描述"
            :disabled="true"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import sparePartsInputApi from "@/api/spare-part-manage/spare-parts-input";
import sparePartsInputApi from "@/api/basic-info-manage/spare-parts-manage";

import failureToReportApi from "@/api/equip-repair-manage/failure-to-report";
import equipTypeApi from "@/api/equip-manage/equip-type/index";
import equipScrapRecordApi from "@/api/equip-manage/equip-scrap-record";
import faultKeyManageApi from "@/api/equip-repair-support/fault-key-manage";
export default {
  name: '',
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: "add"
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {}
      }
    },
    topitemtypeId: {
      type: String,
      default: ""
    },
    hitchTypeArr: {
      type: [Array],
      default: () => {
        return []
      }
    },
    userList: {
      type: [Array],
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      formData: { },
      repairConsumeBOList: [{ num: '', deviceCode: '', cost: '' }],
      rules: {
      },
      // 故障节点
      discoverNodesArr: ['点检发现', '保养发现'],
      showDialog: this.show,
      repairNatureArr: [{ id: "NATURE_IN", name: "委内维修" },
        { id: "NATURE_OUT", name: "委外维修" }],
      sparePartArr: [],
      uploadFileList: [],
      equipmentArr: [],
      keysArr: [],
      allkeysArr: [],
      // 设备类型数组
      equipmentTypeList: [],
      defaultProps: {
        children: "childList",
        value: "equipmentTypeCode",
        label: "equipmentTypeName",
        emitPath: false,
        checkStrictly: true
      }
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      this.uploadFileList = [];
      if (v === 'showdetail') {
        this.querydetial()
        this.query(this.editObject.hitchInfoCode)
      }
    }
  },
  created() {
    this.queryPageKeyList()
    this.querySparePart()
    this.queryEquipmentType()
    this.queryAllEnable()
  },
  mounted() {
  },
  methods: {
    changeKey(e) {
      this.$set(this.formData, this.formData.repairWordBOList, e)
      this.formData = { ...this.formData }
    },
    queryPageKeyList() {
      // 获取数据
      let param = {
        page: 1,
        size: 1000
      };
      faultKeyManageApi.queryPageList(param).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          this.allkeysArr = data.content || []
          this.keysArr = data.content || []
        }
      });
    },
    // 关联设备类型，根据父级查询子级
    queryEquipmentType() {
      // 获取数据
      equipTypeApi.queryTree({}).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          this.equipmentTypeList = data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    changeEquipmentTypeCode() {
      if (this.formData.equipmentTypeCode) {
        if (this.nowChanceStau === 'add') {
          this.queryAllEnable()
        }
        this.queryKey()
        if (this.nowChanceStau === 'edit') {
          this.queryNotDiscardAndDisable()
        }
      } else {
        this.keysArr = this.allkeysArr
      }
    },
    // 查询所有启用的设备
    queryAllEnable() {
      this.equipmentArr = [];
      let params = {
        equipmentTypeCode: this.formData && this.formData.equipmentTypeCode ? this.formData.equipmentTypeCode : ''
      }
      equipScrapRecordApi.queryAllEnable(params).then(res => {
        if (res.code === 1) {
          let data = res.data || []
          this.equipmentArr = data
        }
      })
    },
    // 查询所有不是报废以及禁用的设备
    queryNotDiscardAndDisable() {
      this.equipmentArr = [];
      let params = {
        equipmentTypeCode: this.formData && this.formData.equipmentTypeCode ? this.formData.equipmentTypeCode : void 0,
        equipmentName: void 0
      }
      equipScrapRecordApi.queryNotDiscardAndDisable(params).then(res => {
        if (res.code === 1) {
          let data = res.data || []
          this.equipmentArr = data
        }
      })
    },
    // 条件查询关键字
    queryKey() {
      this.keysArr = [];
      // 获取数据
      faultKeyManageApi.query(this.formData.equipmentTypeCode).then(res => {
        if (res.code === 1) {
          let data = res.data || []
          this.keysArr = data
        }
      })
    },
    querydetial() {
      this.formData = this.editObject
      if (this.formData.repairConsumeVOList) {
        this.repairConsumeBOList = this.formData.repairConsumeVOList
      }
      if (this.editObject.hitchDescription) {
        this.formData.hitchDescription = this.editObject.hitchDescription.split(",")
      } else {
        this.formData.hitchDescription = []
      }
    },
    query(data) {
      // 获取数据
      // var form = new FormData()
      // form.append('hitchInfoCode', data)
      failureToReportApi.queryByHitchInfoId(data).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          this.uploadFileList = data;
          this.uploadFileList.forEach(a => {
            a.name = a.pictureName
          })
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    // 备件
    querySparePart() {
      // 获取数据
      let param = {
        page: 1,
        size: 1000,
        entity: {
          input: 1 }
      };
      sparePartsInputApi.queryByCondition(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.sparePartArr = data;
        }
      });
    },
    cancel() {
      this.$emit("cancelDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
.line-click{
    min-width: 30px;
    height: 30px;
    // background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    border: snow 1px solid;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: 5px;
    color:#fff;
    background-color:#003947 ;
    cursor: pointer;
  }
  .hang-content{
    width: 100%;
    .hang-content-one{
        width: 100%;
        display: flex;
    }

  }
  .add-many{
        border: 1px solid #6ecae3;
        width: 40px;
        height: 40px;
        padding: 0;
        background-color: transparent;
        line-height: 40px;
        border-radius: 4px;
        color: rgb(161, 154, 154);
        font-weight: 600;
        i {
            font-size: 40px;
        }
    }
</style>
